<template>
	<div class="swipe_banner">
		<div class="swipe_banner_content" :style="bannerStyle" ref="swipeBanner">
			<ul>
				<li v-for="(item, index) in swipeBanner" :style="bannerItemStyle">
					<router-link :to="{name: 'goodsSales', params:{id: item.id}}">
						<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.pic" />
					</router-link>
				</li>
			</ul>
		</div>
		<div class="swipe_banner_content_tip">
			<span class="swipe_banner_content_tip_item" v-for="(intem, index) in swipeBannerTip" :ref="getSwipeBannerTipRef(index)" :class="{'on': getSwipeBannerTipActive(index)}"></span>
		</div>
	</div>
</template>
<script>
	import LazyImg from "../../components/common/lazy-img.vue";
	let scrollTimeout= null, scrollTimeoutItem = null;
	export default {
		name:"SwipeBanner",
		data: function(){
			let a = this.$store.state.ad.swipeBanner;
			a = a.concat([a[0]]);
			let b = [].concat(a);
			b.length = b.length -1;
			return {
				swipeBanner:a,
				swipeBannerTip: b, 
				bannerStyle: "",
				bannerItemStyle: "",
				scrollTimeout: null,
				swipeBannerTipActive: 0
			}
		},
		components:{
			LazyImg
		},
		methods:{
			getSwipeBannerTipRef(id){
				return "swipeBannerTip"+id
			},
			getSwipeBannerTipActive(id){
				return id === this.swipeBannerTipActive ? true : false;
			}
		},
		mounted:function(){
			let bannerWidth = this.swipeBanner.length * screen.width,
				n = 0,
				that = this,
				widthStyle ="width:" + bannerWidth + "px;",
				dtime = 3000;
			this.$set(this, "bannerStyle", widthStyle);
			this.$set(this, "bannerItemStyle", "width:" + screen.width + "px;");
			scrollTimeout && clearInterval(scrollTimeout);
			scrollTimeout = setInterval(()=>{
				that.$nextTick(()=>{
					n+=1;
					that.$set(that, "swipeBannerTipActive", n);
					let width = n*screen.width,
						time = 1;
					that.$set(that, "bannerStyle", widthStyle+"transform:translateX(-"+width+"px);transition:"+time+"s linear;");
					if (n + 1 >= that.swipeBanner.length) {
						n = 0;
						that.$set(that, "swipeBannerTipActive", n);
						scrollTimeoutItem && clearTimeout(scrollTimeoutItem);
						scrollTimeoutItem = setTimeout(() => {
							that.$set(that, "bannerStyle", widthStyle);
						}, 1100)
					}
				})
			}, dtime);
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	@baseF: 100/1%;
	.swipe_banner{
		margin:10/@base 0 0;
		height:240/@base;
		overflow: hidden;
		div{
			&.swipe_banner_content_tip{
				position: absolute;
				bottom:30/@base;
				left:40%;
				right:40%;
				display:flex;
				width:20%;
				span{
					width:@baseF/3;
					display: block;
					background-color: rgba(255,255,255,.5);
					height:4/@base;
					margin:0 10/@base;
					&.on{
						background-color: rgba(255,165,0,1);
					}
				}
			}
		}
		position: relative;
		.swipe_banner_content{
			ul{
				li{
					float:left;
					a{
						margin:0 10/@base;
						height:240/@base;
						display: block;
						span{
							width:100%;
							display: block;
						}
						img{
						    box-shadow:0 8/@base 10/@base #ccc;
							width:100%;
							border-radius: 10/@base;
						}
					}
				}
			}
		}
	}
</style>